var miaov = {};

miaov.timeScroll = null; //挂载整屏切换动画的实例

miaov.currentStep = 'step1';

miaov.init = function () {
    miaov.resize(); //设置每一屏的高度和top值

    miaov.events(); //配置事件

    miaov.configIntAnimate(); //配置导航条的动画

    miaov.button3D(".start",'.state1','.state2',0.3);

    $('body').height(8500);

    miaov.configTimeScroll(); //配置整屏切换的动画
};

$(document).ready( miaov.init );

//配置事件
miaov.events = function () {
    $(window).resize( miaov.resize ); //当调整浏览器窗口的大小时，发生 resize 事件
    miaov.nav(); //执行导航条移入移出的动画

    $(window).bind('scroll',scrollFn);
    
    function scrollFn() {
        $(window).scrollTop(0);
    }

    //去掉浏览器默认的滚动行为,mousewheel是一个jq插件
    $('.wrapper').on('mousewheel',function (ev) {
        ev.preventDefault();
    });

    $('.wrapper').one('mousewheel',mousewheelFn);

    var timer = null;
    function mousewheelFn(ev,dir) {
        $(window).unbind('scroll',scrollFn);
        if( dir<1 ){ //向下滚动
            miaov.changeStep('next');
        }else{ //向上
            miaov.changeStep('prev');
        }
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.wrapper').one('mousewheel',mousewheelFn);
        },1200);
    }
};


//切换整屏并且计算滚动条的距离
miaov.changeStep = function (value) {
    if( value === 'next' ){ //向下切换

        //获取当前时间
        var currentTime = miaov.timeScroll.getLabelTime( miaov.currentStep );
        //获取下一个状态的字符串
        var afterStep = miaov.timeScroll.getLabelAfter(currentTime);

        if( !afterStep ) return;
        //获取动画的总时长
        var totalTime = miaov.timeScroll.totalDuration();
        //获取下一个状态的时间
        var afterTime = miaov.timeScroll.getLabelTime(afterStep);
        //获取到滚动条能够滚动的最大的高度
        var maxH = $('body').height() - $(window).height();
        //计算出滚动条滚动的距离
        var positionY = afterTime/totalTime * maxH;
        //滚动条滚动的距离的持续时间
        var d = Math.abs( miaov.timeScroll.time() - afterTime );
        var scrollAnimate = new TimelineMax();
        scrollAnimate.to('html,body',d,{scrollTop:positionY});

        //运动到下一个状态
        miaov.timeScroll.tweenTo( afterStep );
        //记录当前的状态为下一个状态，方便继续切换到下一个动画
        miaov.currentStep = afterStep;

    }else{ //向上切换

        //获取当前时间
        var currentTime = miaov.timeScroll.getLabelTime( miaov.currentStep );
        //获取上一个状态的字符串
        var beforeStep = miaov.timeScroll.getLabelBefore(currentTime);
        if( !beforeStep ) return;
        //获取动画的总时长
        var totalTime = miaov.timeScroll.totalDuration();
        //获取上一个状态的时间
        var beforeTime = miaov.timeScroll.getLabelTime(beforeStep);
        //获取到滚动条能够滚动的最大的高度
        var maxH = $('body').height() - $(window).height();
        //计算出滚动条滚动的距离
        var positionY = beforeTime/totalTime * maxH;
        //滚动条滚动的距离的持续时间
        var d = Math.abs( miaov.timeScroll.time() - beforeTime );
        var scrollAnimate = new TimelineMax();
        scrollAnimate.to('html,body',d,{scrollTop:positionY});
        //运动到上一个状态
        miaov.timeScroll.tweenTo( beforeStep );

        miaov.currentStep = beforeStep;
    }
};

//配置整屏切换的动画以及每一屏中的小动画
miaov.configTimeScroll = function () {
    miaov.timeScroll = new TimelineMax();

        miaov.timeScroll.add('step1');
    miaov.timeScroll.to('.scene2',0.8,{top:0,ease:Cubic.easeInOut});
        miaov.timeScroll.add('step2');
    miaov.timeScroll.to('.scene3',0.8,{top:0,ease:Cubic.easeInOut});
        miaov.timeScroll.add('step3');
    miaov.timeScroll.to('.scene4',0.8,{top:0,ease:Cubic.easeInOut});
        miaov.timeScroll.add('step4');
    miaov.timeScroll.to('.scene5',0.8,{top:0,ease:Cubic.easeInOut});
        miaov.timeScroll.add('step5');

    miaov.timeScroll.stop();
};


//配置导航条的动画
miaov.configIntAnimate = function () {
    var initAnimate = new TimelineMax();

    initAnimate.to('.menu',0.5,{opacity:1});
    initAnimate.to('.menu',0.5,{left:22},'-=0.3');
    initAnimate.to('.nav',0.5,{opacity:1});

    //设置首屏的动画
    initAnimate.to('.scene1_logo',0.5,{opacity:1});
    initAnimate.staggerTo('.scene1_1 img',2,{opacity:1,rotationX:0,ease:Elastic.easeOut});
    initAnimate.to('.light_left',0.7,{rotationZ:0,ease:Cubic.easeOut},'-=2');
    initAnimate.to('.light_right',0.7,{rotationZ:0,ease:Cubic.easeOut},'-=2');
    initAnimate.to('.controls',0.5,{bottom:20,opacity:1},'-=0.7');

    initAnimate.to('body',0,{"overflow-y":"scroll"});


};

//导航条中的动画
miaov.nav = function () {
    var navAnimate = new TimelineMax();
    $('.nav a').bind('mouseenter',function () { //鼠标移入
        var w = $(this).width();
        var l = $(this).offset().left;
        navAnimate.clear();
        navAnimate.to('.line', 0.4, {opacity:1,left:l,width:w});
    });

    $('.nav a').bind('mouseleave',function () { //鼠标移出
        navAnimate.clear();
        navAnimate.to('.line', 0.4, {opacity:0});
    });

    //鼠标移入language要现实dropdown
    var languageAinimate = new TimelineMax();

    $('.language').on('mouseenter',function () {
        languageAinimate.clear();
        languageAinimate.to('.dropdown',0.5,{opacity:1,"display":"block"})
    });

    $('.language').on('mouseleave',function () {
        languageAinimate.clear();
        languageAinimate.to('.dropdown',0.5,{opacity:0,"display":"none"})
    });
    
    //调出左侧的导航条
    $('.btn_mobile').click(function () {
        var m_aimate = new TimelineMax();
        m_aimate.to('.left_nav',0.5,{left:0});
    });

    $('.l_close').click(function () {
        var l_aimate = new TimelineMax();
        l_aimate.to('.left_nav',0.5,{left:-300});
    });

};


//3d翻转效果
miaov.button3D = function (obj,element1,element2,d) {
    var button3DAnimate = new TimelineMax();

    button3DAnimate.to( $(obj).find(element1),0,{
        rotationX:0,
        transformPerspective:600,
        transformOrigin:'center bottom'
    });
    button3DAnimate.to( $(obj).find(element2),0,{
        rotationX:-90,
        transformPerspective:600,
        transformOrigin:'top center'
    });

    $(obj).on("mouseenter",function(){
        var enterAnimate = new TimelineMax();

        var ele1 = $(this).find(element1);
        var ele2 = $(this).find(element2);

        enterAnimate.to(ele1,d,{rotationX:90,top:-ele1.height(),ease:Cubic.easeInOut},0);
        enterAnimate.to(ele2,d,{rotationX:0,top:0,ease:Cubic.easeInOut},0);
    });

    $(obj).on("mouseleave",function(){
        var leaveAinimate = new TimelineMax();

        var ele1 = $(this).find(element1);
        var ele2 = $(this).find(element2);

        leaveAinimate.to(ele1,d,{rotationX:0,top:0,ease:Cubic.easeInOut},0);
        leaveAinimate.to(ele2,d,{rotationX:-90,top:ele2.height(),ease:Cubic.easeInOut},0);
    });
};

//设置每一屏的高度和top值
miaov.resize = function () {
    $('.scene').height( $(window).height() ); //设置每一屏的高度
    $('.scene:not(:first)').css('top',$(window).height());

    if( $(window).width() <= 950 ){
        $('body').addClass('r950');
        $('.menu').css('top',0);
    }else{
        $('body').removeClass('r950');
        $('.menu').css('top',22);
    }
};